<template>
  <div class="supplementation-container">
    <h2>活动补录申请</h2>
    <el-form class="supplementation-form" @submit.prevent="handleSubmit">
      <!-- <el-form-item label="B级管理员ID">
        <el-input v-model="form.bAdminId" placeholder="请输入B级管理员ID" clearable />
      </el-form-item> -->
      <el-form-item label="学生ID">
        <el-input v-model="form.stuId" placeholder="请输入学生ID" clearable />
      </el-form-item>
      <el-form-item label="活动ID">
        <el-input v-model="form.activityId" placeholder="请输入活动ID" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交补录申请</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const form = ref({
  stuId: '',
  activityId: ''
})

const handleSubmit = async () => {
  if (!form.value.stuId || !form.value.activityId) {
    ElMessage.warning('请填写完整信息')
    return
  }
  try {
    // 当前操作管理员id
    const adminId = localStorage.getItem('adminId')
    const response = await axios.put(
      `http://localhost:8080/admin/${form.value.stuId}/${form.value.activityId}/editStudentPoints`,
      adminId, // 直接传操作者ID字符串
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    )
    if (response.data && response.data.code === 200) {
      ElMessage.success('补录申请成功')
      form.value.stuId = ''
      form.value.activityId = ''
    } else {
      ElMessage.error(response.data.msg || '补录申请失败')
    }
  } catch (error) {
    ElMessage.error('网络错误或服务器异常')
  }
}
</script>

<style lang="scss" scoped>
.supplementation-container {
  max-width: 420px;
  margin: 48px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(90, 169, 233, 0.10);
  padding: 36px 32px 28px 32px;

  h2 {
    text-align: center;
    color: #357ab8;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    letter-spacing: 2px;
  }

  .supplementation-form {
    .el-form-item {
      margin-bottom: 1.5rem;
      label {
        font-size: 1.1rem;
        color: #357ab8;
        font-weight: 500;
      }
      .el-input {
        width: 100%;
      }
    }
    .el-button {
      width: 100%;
      padding: 0.9rem;
      font-size: 1.1rem;
      font-weight: bold;
      border-radius: 6px;
      background: linear-gradient(90deg, #5ba9e9 0%, #357ab8 100%);
      color: #fff;
      border: none;
      transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 8px rgba(90, 169, 233, 0.10);
      &:hover {
        background: linear-gradient(90deg, #357ab8 0%, #5ba9e9 100%);
        box-shadow: 0 4px 16px rgba(90, 169, 233, 0.18);
      }
    }
  }
}
</style>